<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户授权</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/api/oauth/static/layui/css/layui.css}" media="all">
</head>
<body>

<style>
    .login-container {
        width: 420px;
        margin: 120px auto 0;
        padding: 20px;
        border: 1px solid #d0e7e3;
        border-radius: 10px;
        box-shadow: 3px 3px 8px #dad9d9; /* 阴影偏移量、模糊半径、扩散半径和颜色 */
    }

    .login-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }

    .footer-container {
        margin-top: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .title-item {
        margin-top: 25px;
        margin-bottom: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<div class="layui-form">
    <div class="login-container">
        <div class="layui-form-item title-item">
            <h2>账号授权</h2>
            <!--            <h2>统一认证中心</h2>-->
        </div>
        <div class="layui-form-item">
            <div style="padding: 0px 32px;margin: 24px 0;font-size: 16px;line-height: 22px;text-align: left;">
                您正在授予xxxxx以下权限：
            </div>
            <div style="padding: 0px 32px 32px 32px;">
                <div class="layui-input-block" style="margin-left: 0px;">
                    <input name="desc1" type="radio" title="获取您的昵称" disabled checked>
                </div>
                <div style="margin-top: 24px;">
                    授权给“Xxxxx”使用的数据由其隐私政策管理，您可随时xxxxx帐号隐私中心取消授权。
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md5">
                <form id="form-refuse" method="post" action="">
                    <input type="hidden" name="user_oauth_approval" value="false"/>
                    <button class="layui-btn layui-btn-primary layui-btn-fluid" lay-submit
                            lay-filter="user-grant-refuse"
                            id="">取消
                    </button>
                </form>
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md2">
                &nbsp;
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md5">
                <form id="form-agree" method="post" action="">
                    <input type="hidden" name="user_oauth_approval" value="true"/>
                    <button class="layui-btn layui-bg-blue layui-btn-fluid" lay-submit lay-filter="user-grant-agree"
                            id="user-login-submit">授权
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-trans footer-container">
        <p>© 2024 <a href="#" target="_blank">www.llyong.cn</a></p>
    </div>
</div>

<!-- HTML Content -->
<script th:src="@{/api/oauth/static/layui/layui.js}"></script>
<script th:src="@{/api/oauth/static/layui/jquery.js}"></script>
<script>
    layui.use(function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;
        let util = layui.util;

        $(document).ready(function () {
            let protocol = window.location.protocol;
            let hostname = window.location.hostname;
            let port = window.location.port;
            let path = window.location.pathname;
            let search = window.location.search

            let url = `${protocol}//${hostname}:${port}${path}${search}`;

            $('#form-refuse').attr('action', `${path}${search}`);
            $('#form-agree').attr('action', `${path}${search}`);
        });
    });
</script>
</body>
</html>